<!--
 * @Description: 可配置的实时数据监控图表组件
 * @Version: 2.0
 * @Autor: swc
 * @Date: 2024-09-07 17:12:46
 * @LastEditors: zss
 * @LastEditTime: 2025-09-10 09:26:38
-->
<template>
  <div class="c-base-chart">
    <div
      ref="chartContainer"
      class="chart-container"
      :style="{ width: chartWidth, height: chartHeight }"
    ></div>
    <div class="mask-container" v-if="isMask"></div>
    <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
  </div>
</template>

<script lang="ts">
import * as echarts from 'echarts';
import { I_cmd, N_cBaseChart, T_cmd, T_srv, Tsrv, ifs, vue } from './config';

@T_srv.comp
export default class cBaseChart extends vue {
  /* 图表配置 */
  @T_srv.prop({
    required: true,
    type: Object,
    default: () => ({})
  })
  config!: N_cBaseChart.ChartComponentProps['config'];

  /* 是否自动初始化 */
  @T_srv.prop({
    required: false,
    type: Boolean,
    default: true
  })
  autoInit!: boolean;

  /* 主题 */
  @T_srv.prop({
    required: false,
    type: String,
    default: ''
  })
  theme!: string;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 组件名 */
  private name: string = 'cBaseChart';

  private funName: string = 'cBaseChart';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = new T_cmd();

  /* 遮罩 */
  public isMask: boolean = false;

  /* 错误信息 */
  private errorMessage: string = '';

  /* 计算图表宽度 */
  get chartWidth(): string {
    return this.config?.chart?.width || '100%';
  }

  /* 计算图表高度 */
  get chartHeight(): string {
    return this.config?.chart?.height || '400px';
  }

  /* 监听配置变化 */
  @T_srv.watch('config', { deep: true })
  onConfigChange(newConfig: N_cBaseChart.ChartComponentProps['config']) {
    if (this.GT_command) {
      // 重新初始化图表
      this.initChart();
    }
  }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    // 如果配置了自动初始化，则在挂载后初始化图表
    if (this.autoInit) {
      this.$nextTick(() => {
        this.initChart();
      });
    }
  }

  destroyed() {
    // 销毁图表实例
    this.dispose();

    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  /* 设置组件整体遮罩 */
  public setMask(p: boolean) {
    this.isMask = p;
  }

  public getMask(p: boolean): boolean {
    return this.isMask;
  }

  /* 初始化图表 */
  public initChart(): void {
    try {
      this.errorMessage = '';
      (this.GT_command as any).initChart();
    } catch (error) {
      console.error('初始化图表失败:', error);
      this.errorMessage = '图表初始化失败';
    }
  }

  /* 手动更新数据 */
  public updateData(data: any): void {
    try {
      (this.GT_command as any).updateData(data);
    } catch (error) {
      console.error('更新数据失败:', error);
    }
  }

  /* 刷新图表 */
  public refresh(): void {
    try {
      (this.GT_command as any).refresh();
    } catch (error) {
      console.error('刷新图表失败:', error);
    }
  }

  /* 调整尺寸 */
  public resize(): void {
    try {
      (this.GT_command as any).resize();
    } catch (error) {
      console.error('调整尺寸失败:', error);
    }
  }

  /* 销毁图表 */
  public dispose(): void {
    try {
      (this.GT_command as any).dispose();
    } catch (error) {
      console.error('销毁图表失败:', error);
    }
  }

  /* 获取ECharts实例 */
  public getInstance(): echarts.ECharts | null {
    try {
      return (this.GT_command as any).getInstance();
    } catch (error) {
      console.error('获取实例失败:', error);
      return null;
    }
  }
}
</script>

<style lang="scss" scoped>
.c-base-chart {
  position: relative;
  width: 100%;
  height: 100%;

  .chart-container {
    width: 100%;
    height: 100%;
  }

  .mask-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .error-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f56c6c;
    background-color: #fef0f0;
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid #fbc4c4;
    z-index: 20;
  }
}
</style>
